<php>
$array = json_decode($list['json_str'],true);
$action = ['view' => 'url', 'click' => 'key'];
</php>


<html>
    <link rel="stylesheet" href="/Public/Admin/css/bootstrap.min.css">
    <script src="/Public/Admin/js/jquery.js"></script>
    <script src="/Public/Admin/js/pintuer.js"></script>  
    <style>
        .modal-form{
            width: 100%;
            margin-bottom: 15px;
            overflow: hidden;
        }
        .set-menubox{
            width: 100%;
            height: 370px;
            position: relative;
        }
        .set-menu-wrapper{
            width: 100%;
            background-color: white;
            overflow: hidden;
            padding: 20px;
            border-radius: 10px;
            position: relative;
        }
        .set-menu-bottom{
            width: 100%;
            position: absolute;
            bottom: 0;
            left:0;
            background-color: #f9f9f9;
            height: 40px;
            line-height: 37px;
            border-top: 1px solid #e8e7e7  ;
        }
        .set-menu-bottom-sec2{
            float: left;
            width: 50%;
            text-align: center;
            border-left: 1px solid #e8e7e7;
            position: relative;
        }
        .set-menu-bottom-sec1{
            float: left;
            width: 100%;
            text-align: center;
            border-left: 1px solid #e8e7e7;
            position: relative;
        }
        .set-menu-bottom-sec3{
            width: 33.33%;
            position: relative;
            float: left;
            text-align: center;
            border: 1px solid #f9f9f9 ;
            border-left: 1px solid #e8e7e7;
        }
        .set-menu-bottom-sec:nth-child(1){
            border-left: none;
        }
        .set-menu-bottom-tc{
            position: absolute;
            bottom: 65px;
            left: 50%;
            width: 80px;
            margin-left: -40px;
            border:1px solid #b1b1af ;
            min-height: 40px;
        }
        .set-menu-bottom-tc-row{
            width: 100%;
            height: 40px;
            line-height: 40px;
            border: 1px solid white;
            border-bottom: 1px solid #dddddd ;
        }
        .set-menu-bottom-tc-row:nth-last-child(1){
            border-bottom: none;
        }
        .set-menu-bottomimg{
            position: absolute;
            bottom: -5px;
            width: 10px;
            height: 5px;
            left: 50%;
            margin-left:-5px ;
        }
        .menu-site-right{
            width: 600px;
            min-height: 600px;
            border: 1px solid #dddddd;
            padding: 10px;
            float: left;
            margin-left: 20px;
        }
        /*.set-menu-wrapper-pro-text{
            float: left;
        }*/
        .menu-site-right-sec{
            width: 100%;
        }
        .menu-site-right-head{
            width: 100%;
            height: 125px;
            border:1px solid #dddddd ;
            padding: 10px;
        }
        .menu-site-right-head span,.menu-site-right-body span{
            font-weight: 600;
            font-size: 15px;
            color: #323232;
        }
        .menu-site-right-head-main{
            width: 100%;
            height: 80px;
            background-color: #f7f7f7;
            padding: 10px;
            overflow: hidden;
            margin-top: 5px;
        }
        .menu-site-right-head-main span,.menu-site-right-body-sec span{
            float: left;
            margin-top: 4px;
            display: inline-block;
            width: 60px;
            text-align: right;
            margin-right: 20px;
        }
        .menu-site-right-head-main div,.menu-site-right-body-sec div{
            float: left;
            margin-left: 10px;
            width: 440px;
        }
        .menu-site-right-head-main div input{
            width: 300px;
            border-radius: 3px;
            border: 1px solid #cdcdcd;
            height: 30px;
            line-height: 28px;
        }
        .menu-site-right-body{
            width: 100%;
            padding: 10px;
            position: relative;
            border:1px solid #dddddd ;
            margin-top: 15px;
        }
        .menu-site-right-body-main{
            width: 100%;
            background-color: #f7f7f7;
            padding: 10px;
            overflow: hidden;
            margin-top: 5px;
        }
        .menu-site-right-body-sec{
            width: 100%;
            overflow: hidden;
        }
        .menu-site-right-body-sec .menu-site-input{
            width: 300px;
            border-radius: 3px;
            border: 1px solid #cdcdcd;
            height: 30px;
            line-height: 30px;
            background-color: white;
        }
        .menu-site-input input{
            float: left;
            height: 28px;
            line-height: 28px;
            border: none;
            padding-left:10px ;
            width: 200px;
        }
        .menu-site-input button{
            float: right;
            height: 28px;
            line-height: 28px;
            border: none;
            color: white;
            background-color: #428bcb;
            text-align: center;
            min-width: 50px;
            padding: 0 7px;
        }
        .menu-site-right-body-sec div span{
            font-weight: 500;
            width: 100px;
            margin-right: 10px;
            text-align: left;
        }
        .menue-site-right-detail{
            width: 100%;
            border-top:1px solid #efefef ;
            margin-top: 15px;
            padding-top: 10px;
            margin-left: 0 !important;
        }
        .menue-site-right-detail p{
            float: left;
            width: 100%;
        }
        .menue-site-right-detail .menu-site-input{
            margin-left: 0 !important;
        }
        .menu-site-sub{
            text-align: right;
            margin-top: 20px;
        }
        .menu-site-sub button{
            float: right;
            height: 28px;
            line-height: 28px;
            border: none;
            color: white;
            background-color: #428bcb;
            text-align: center;
            min-width: 50px;
            padding: 0 7px;
        }
        .menu-site-close{
            position: absolute;
            right: -10px;
            top:-10px;
            width: 20px;
            height: 20px;
        }
        .menu-left-choose{
            border: 1px solid #008100 !important;
        }
        .menu-addimg{
            width: 10px;
            height: 10px;

        }

    </style>
    <body>
        <div class="set-menu-wrapper" >
            <div class="menu-site-right">
                <div class="menu-site-right-sec">
                    <div class="menu-site-right-head">
                        <span>标题</span>
                        <div class="menu-site-right-head-main">
                            <span>标题</span>
                            <div>
                                <input id="title" type="text" value="{$list.title}">
                                <p>仅用于区分个性化菜单</p>
                            </div>
                        </div>
                    </div>
                    <div class="menu-site-right-body">
                        <img class="menu-site-close" src="__PUBLIC__/Admin/images/menuclose.png" alt="" onclick="btnreduce()"/>
                        <span>菜单设置</span>
                        <div class="menu-site-right-body-main">
                            <div class="menu-site-right-body-sec button">
                                <span>菜单名称</span>
                                <div class="menu-site-input">
                                    <input id="name" value="菜单名称" type="text">
                                    <button>按钮</button>
                                </div>
                            </div>
                            <div class="menu-site-right-body-sec sub_button">
                                <span>菜单动作</span>
                                <div>
                                    <span>
                                        <input id="type" name="type" type="radio" attribute="url" value="view" id='view'> 链接
                                        <input id="type" name="type" type="radio" attribute="key" value="click" id='click'> 按钮
                                    </span>
                                    <div class="menue-site-right-detail">
                                        <div class="menu-site-input">
                                            <input id="attribute"  type="text">
                                            <button>按钮</button>
                                        </div>
                                        <p style="font-weight: 600">在此处设置的文字回成为粉丝点击此按钮时公众号回复的消息</p>
                                <p style="font-weight: 600">在此处设置的URL必须以http://开头</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pro-textmain set-menu-wrapper-pro-text">
                    <div class="app-header"></div>
                    <div class="pro-textmain-box">
                        <div class="title js-default-content">
                            <h1>
                                <span></span>
                            </h1>
                        </div>
                        <input type="hidden" id='menu_id' value="{$list['id']}">
                        <div class="set-menubox">
                            <div class="set-menu-bottom">
                                <?php if (!empty($array['button'])) { ?>
                                <?php foreach ($array['button'] as $key => $arr) { ?>
                                <div class="set-menu-bottom-sec set-menu-bottom-sec<?= (count($array['button']) + 1) > 3 ? 3 : (count($array['button']) + 1) ?> <?= $key == 0 ? 'menu-left-choose' : '' ?>" menu="one" name="<?= $arr['name'] ?>" type="<?= empty($arr['type']) ? '' : $arr['type'] ?>" <?= empty($arr['type']) ? '' : $action[$arr['type']] . '="' . $arr[$action[$arr['type']]] . '"' ?>  onclick="btnchoose(this)">
                                     <span><?= $arr['name'] ?></span>
                                    <div class="set-menu-bottom-tc">
                                        <img class="set-menu-bottomimg" src="__PUBLIC__/Admin/images/xiajian.jpg" alt="" />
                                        <?php if (!empty($arr['sub_button'])) { ?>
                                        <?php foreach ($arr['sub_button'] as $sub_button) { ?>
                                        <div class="set-menu-bottom-tc-row" menu="two" onclick="btnchoose(this)" name="<?= $sub_button['name'] ?>" type="<?= $sub_button['type'] ?>" <?= $action[$sub_button['type']] . '="' . $sub_button[$action[$sub_button['type']]] . '"' ?>><span><?= $sub_button['name'] ?></span></div>
                                        <?php } ?>
                                        <?php if (count($arr['sub_button']) < 5) { ?>
                                        <div class="set-menu-bottom-tc-row" onclick="btnadd(this)">
                                            <img class="menu-addimg" src="__PUBLIC__/Admin/images/menuadd.png" alt="" />
                                        </div>
                                        <?php } ?>
                                        <?php } else { ?>
                                        <div class="set-menu-bottom-tc-row" onclick="btnadd(this)">
                                            <img class="menu-addimg" src="__PUBLIC__/Admin/images/menuadd.png" alt="" />
                                        </div>
                                        <?php } ?>
                                    </div>
                                </div>
                                <?php } ?>
                                <?php } ?>
<!--                                <div class="set-menu-bottom-sec set-menu-bottom-sec<?= empty($array['button']) ? '' : ((count($array['button']) + 1) > 3 ? 3 : (count($array['button']) + 1) ) ?> set-menu-add-c1">
                                    <img class="menu-addimg" src="__PUBLIC__/Admin/images/menuadd.png" alt="" /> 添加菜单
                                </div>-->
                                <div id="identification" style="clear: both;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 menu-site-sub">
                <button onclick="collatingData()">提交</button>
            </div>
        </div>
        <script>
            //底部添加按钮
            $(".set-menu-bottom").on("click", '.set-menu-add-c1', function () {
                var seclength = $(this).parent().find(".set-menu-bottom-sec").length;

                if (seclength == 2) {
                    $(this).before('<div menu="one" class="set-menu-bottom-sec set-menu-bottom-sec3" name="菜单名称" onclick="btnchoose(this)"><span>菜单名称</span><div class="set-menu-bottom-tc"> <img class="set-menu-bottomimg" src="__PUBLIC__/Admin/images/xiajian.jpg" alt="" /> <div class="set-menu-bottom-tc-row" onclick="btnadd(this)"> <img class="menu-addimg" src="__PUBLIC__/Admin/images/menuadd.png" alt="" /> </div></div></div>')
                    $(this).parent().find(".set-menu-bottom-sec").removeClass("set-menu-bottom-sec2").addClass("set-menu-bottom-sec3");
                } else if (seclength == 3) {
                    $(this).before('<div menu="one" class="set-menu-bottom-sec set-menu-bottom-sec3" name="菜单名称"  onclick="btnchoose(this)"><span>菜单名称</span><div class="set-menu-bottom-tc"> <img class="set-menu-bottomimg" src="__PUBLIC__/Admin/images/xiajian.jpg" alt="" /> <div class="set-menu-bottom-tc-row" onclick="btnadd(this)"> <img class="menu-addimg" src="__PUBLIC__/Admin/images/menuadd.png" alt="" /> </div></div></div>')
                    //            $(this).parent().find(".set-menu-bottom-sec").removeClass("set-menu-bottom-sec1").addClass("set-menu-bottom-sec2");
                    $(this).remove();
                }
            });
            //赋值
            $('#name,#type,#attribute').change(function () {
                var selected = $('.menu-left-choose');
                selected.find(':first').html($('#name').val());
                selected.attr('name', $('#name').val());      // 赋值name
                var checked = $('input[type="radio"]:checked').val() ? $('input[type="radio"]:checked').val() : '';
                // 有子类
                selected.attr('type', checked);   // 赋值type
                if (checked) {
                    selected.attr($('input[type="radio"]:checked').attr('attribute'), $('#attribute').val());   // 赋值attribute属性
                }
                if (selected.attr('menu') === 'two') {
                    var type_val = selected.parents('.set-menu-bottom-sec').attr('type');
                    selected.parents('.set-menu-bottom-sec').removeAttr('type');
                    type_val && selected.parents('.set-menu-bottom-sec').removeAttr($('input[type="radio"]:checked').attr('attribute'));
                }
            })
            btnchoose($('div[menu="one"]').eq(0));

            var action = {view:'url',click:'key'};
            //按钮选择
            function btnchoose(obj) {
                $(".set-menu-bottom-sec,.set-menu-bottom-tc-row").removeClass("menu-left-choose");
                $(obj).addClass("menu-left-choose");
                if ($(obj).attr('menu') === 'one' && $(obj).find('.set-menu-bottom-tc-row').size() > 1) {
                    $('.sub_button').hide();
                } else {
                    $('.sub_button').show();
                }
                stopBubble();
                siteDate(obj)
            }
            //    btnchoose($('div[menu="one"]').eq(0));
            function siteDate(obj) {
                var text = $(obj).find(':first').html();
                var type = $(obj).attr('type');
                $("#name").val(text);
                $('input[type="radio"]').attr('checked', false);
                $('#attribute').val('');
                if (type) {
                    $('input[value="' + type + '"]').prop('checked','true');                  
                    if(type == 'click'){
                        var option = 'key';
                    }else if(type == 'view'){
                        var option = 'url';
                    }
                    var attribute = $(obj).attr(option);
                    if (attribute) {
                        $('#attribute').val(attribute);
                    }
                }
            }
            //上方添加按钮
            function  btnadd(obj) {
                var smallnum = $(obj).parent().find(".set-menu-bottom-tc-row").length;
                if (smallnum == 5) {
                    $(obj).before('<div class="set-menu-bottom-tc-row" menu="two" onclick="btnchoose(this)" name="子菜单名称"><span>子菜单名称</span></div>');
                    $(obj).remove();
                } else {
                    $(obj).before('<div class="set-menu-bottom-tc-row" menu="two" onclick="btnchoose(this)" name="子菜单名称"><span>子菜单名称</span></div>');
                }
                var selected = $('.menu-left-choose');
                if (selected.attr('menu') === 'one' && selected.find('.set-menu-bottom-tc-row').size() > 1) {
                    $('.sub_button').hide();
                } else {
                    $('.sub_button').show();
                }
                stopBubble();
            }
            //按钮删除
            function  btnreduce() {
                var selected = $(".menu-left-choose");
                var selected_parent = selected.parent();
                //二级按钮删除
                if (selected.attr('menu') == 'two') {
                    selected.parents('.set-menu-bottom-sec').addClass('menu-left-choose');
                    if (selected_parent.find('.set-menu-bottom-tc-row').size() == 5 && !selected.parent().find('.menu-addimg').size()) {
                        selected_parent.append('<div class="set-menu-bottom-tc-row" onclick="btnadd(this)"> <img class="menu-addimg" src="__PUBLIC__/Admin/images/menuadd.png" alt="" /> </div>');
                    }
                    selected.remove();
                    //一级按钮删除
                } else if (selected.attr('menu') == 'one') {
                    if ($('div[menu="one"]').size() > 1) {
                        if ($('div[menu="one"]').size() == 3) {
                            $('#identification').before('<div class="set-menu-bottom-sec set-menu-bottom-sec3 set-menu-add-c1"><img class="menu-addimg" src="__PUBLIC__/Admin/images/menuadd.png" alt="" /> 添加菜单</div>');
                        } else if ($('div[menu="one"]').size() == 2) {
                            $('.set-menu-bottom-sec').removeClass('set-menu-bottom-sec3').addClass('set-menu-bottom-sec2');
                        }
                        selected.remove();
                    }
                }
            }
            // 数据整理
            function collatingData() {
                var bool = true;
                var json_str = new Array();

                var title = $("#title").val();
                if (!title) {
                    alert('标题不能是空！~');
                    return false;
                }

                $('div[menu="one"]').each(function (i, item) {
                    var button = {};
                    var name = $(item).attr('name');
                    if (!name) {
                        alert('一级标题不能是空！~');
                        bool = false;
                        return false;
                    }
                    if (name.length > 4) {
                        alert('一级标题最多4个汉字！~');
                        bool = false;
                        return false;
                    }
                    if ($(item).find('div[menu="two"]').size()) {
                        button.name = name;
                        button.sub_button = new Array();
                        $(item).find('div[menu="two"]').each(function (j, jtem) {
                            var sub_button_obj = {};
                            var name = $(jtem).attr('name');
                            var type = $(jtem).attr('type');
                            sub_button_obj.name = name;
                            sub_button_obj.type = type;
                            if (!name) {
                                alert('二级标题不能是空！~');
                                bool = false;
                                return false;
                            }
                            if (name.length > 7) {
                                alert('二级标题最多7个汉字！~');
                                bool = false;
                                return false;
                            }
                            if (!type) {
                                alert(name + '类型未选择！~');
                                bool = false;
                                return false;
                            }
                            if(sub_button_obj.type == 'click'){
                                var option = 'key';
                            }else if(sub_button_obj.type == 'view'){
                                var option = 'url';
                            }
                            var attribute = $(jtem).attr(option);
                            if (!attribute) {
                                alert('请输入' + name + '执行操作地址！~');
                                bool = false;
                                return false;
                            }
                            sub_button_obj[option] = attribute;
                            button.sub_button.push(sub_button_obj);
                        });
                        if (!bool) {
                            return false;
                        }
                    } else {
                        var type = $(item).attr('type');
                        button.name = name;
                        button.type = type;
                        if (!type) {
                            alert(name + '类型未选择！~');
                            bool = false;
                            return false;
                        }
                        if(button.type == 'click'){
                                var option = 'key';
                            }else if(button.type == 'view'){
                                var option = 'url';
                            }
                        var attribute = $(item).attr(option);
                        if (!attribute) {
                            alert('请输入' + name + '执行操作地址！~');
                            bool = false;
                            return false;
                        }
                        button[option] = attribute;
                    }
                    json_str.push(button);
                });
                if (!bool) {
                    return false;
                }
                var json = {button: json_str};
                var id = $('#menu_id').val();
                $.ajax({
                    url: "__APP__/Admin/CustomMenu/updateSetMenu?id="+id,
                    type: "post",
                    data: {'json_str': json, 'title': title},

                    success: function (data) {
                        alert(data.msg);
                    location.href = "{:U('CustomMenu/setMenuList')}";
                    }

                });
            }
          function stopBubble(e) {
        window.event.cancelBubble = true;
    }
        </script>
    </body></html>
<SCRIPT Language=VBScript><!--

//--></SCRIPT>